<template>
  <div>
    <div class="navbox">
      <div class="logo"></div>
      <div class="navleft">
        <div class="navleft-item" v-for="(item, index) in leader" :key="index">
          <span class="name">{{ item.name }}：</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
      <div class="navright">
        <div class="weat">
          <div class="weatl">
            <p class="temp">{{ temp }}</p>
            <p class="tdesc">{{ tdesc }}</p>
          </div>
          <div class="weatr"></div>
        </div>
        <div class="time">{{ time }}</div>
        <div class="week">{{ week }}</div>
        <div class="screen-close-back" @click="goBack"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { weather } from "../../utils/api";
export default {
  name: "navMain",
  data() {
    return {
      temp: "",
      tdesc: "",
      week: "",
      time: "",
      weaicon: "",
      leader: [
        {
          name: "指挥长",
          value: "邵泉",
        },
        {
          name: "常务副指挥长",
          value: "连耀军",
        },
        {
          name: "值班长",
          value: "何国权",
        },
      ],
    };
  },
  mounted() {
    this.getTime();
    setInterval(() => {
      this.getTime();
    }, 1000);

    this.week = this.getWeekDate();

    weather().then((res) => {
      if (res.data.data.length > 0) {
        let rdata = res.data.data[1];
        // this.tdesc = rdata.conditionDay + "转" + rdata.conditionNight;
        this.tdesc = rdata.conditionDay;
        this.temp = rdata.tempNight + "°C ~ " + rdata.tempDay + "°C";
      }
    });
  },
  methods: {
    getTime() {
      let date = new Date(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds();
      let year = date.getFullYear();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      this.time =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
    },
    getWeekDate() {
      let now = new Date();
      let day = now.getDay();
      let weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      let week = weeks[day];
      return week;
    },
    goBack(){
      window.opener = null;
      window.open("about:blank", "_top").close()
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbox {
  width: 100%;
  height: 100px;
  background: url(~@/assets/image/common/sider_r.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}
.logo {
  width: 100%;
  height: 100px;
  background: url(~@/assets/image/common/logo.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0px;
}
.navright {
  width: 700px;
  height: 100px;
  position: absolute;
  right: 0px;
  z-index: 99;
}
.weat {
  float: left;
  width: 190px;
}
.weatl {
  float: left;
}
.weatl p {
  line-height: 3px;
}
.temp {
  font-size: 24px;
  font-weight: bold;
  
}
.tdesc {
  font-size: 18px;
  text-align: center;
}
.time {
  float: left;
  width: 320px;
  font-size: 30px;
  line-height: 65px;
}
.week {
  width: 140px;
  float: left;
  font-size: 28px;
  line-height: 65px;
  text-align: center;
}
.screen-close-back{
  width: 40px;
  height: 40px;
  float: left;
  margin-top: 10px;
  background: url(~@/assets/image/common/right-top-back.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor:pointer
}
.navleft {
  width: 800px;
  height: 100px;
  position: absolute;
  left: 50px;
  display: flex;
  justify-content: space-around;
  font-size: 27px;
  line-height: 65px;
}
.navleft .value {
  color: #fedc85;
}
</style>
 